<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Example: DataTable - Basic Table (YUI Library)</title>
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/reset/reset.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/fonts/fonts.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/logger/assets/logger.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/datatable/assets/datatable.css">
		<style type="text/css">
			/* custom css*/
			#elDataTable {margin:1em;}
			#elDataTable table {border-collapse:collapse;}
			#elDataTable th, #basic td {border:1px solid #000;padding:.25em;}
			#elDataTable th {background-color:#696969;color:#fff;} /*dark gray*/
			#elDataTable .yui-dt-odd {background-color:#eee;} /*light gray*/
			#elDataTable em {font-style:italic;}
			#elDataTable strong {font-weight:bold;}
			#elDataTable .big {font-size:136%;}
			#elDataTable .small {font-size:77%}
		</style>
	</head>
	<body>

    	<div id="elDataTable"></div>
		
		<div id="elScripts">	
			<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
			<script src="http://yui.yahooapis.com/2.2.2/build/logger/logger-min.js"></script>
			<script src="http://yui.yahooapis.com/2.2.2/build/dragdrop/dragdrop-min.js"></script>
			<script src="http://yui.yahooapis.com/2.2.2/build/datasource/datasource-beta-min.js"></script>
			<script src="http://yui.yahooapis.com/2.2.2/build/datatable/datatable-beta-min.js"></script>
			<script type="text/javascript">
				YAHOO.example.Data = {};
				YAHOO.example.Data.bookorders = [
				    {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing", genre:"one", in_stock: 0},
				    {id:"po-0297", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life", genre:"two", in_stock: 1},
				    {id:"po-0783", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud", genre:"three"},
				    {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice", genre:"one", in_stock: true}
				];      
				
				var my = {};			

				my.oLogger = new YAHOO.widget.LogReader();

				my.oColumnHeaders = [
				    {key:"id", sortable:true, resizeable:true},
				    {key:"date", type:"date", sortable:true, resizeable:true},
				    {key:"quantity", type:"number", sortable:true, resizeable:true},
				    {key:"amount", type:"currency", sortable:true, resizeable:true},
				    {key:"title", type:"html", sortable:true, resizeable:true},
				    {key:"genre", type:"select", selectOptions: ["one", "two", "three"], editor:"textbox"},
				    {key:"in_stock", type:"checkbox", editor:"textbox"}
				];		

				my.oColumnSet = new YAHOO.widget.ColumnSet(my.oColumnHeaders);
		
				my.oDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
				my.oDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
				my.oDataSource.responseSchema = {
		    		fields: ["id","date","quantity","amount","title"]
				};
				
				my.oDataTable = new YAHOO.widget.DataTable("elDataTable", my.oColumnSet, my.oDataSource,{caption:"Example: Basic Table"});
                
                my.oDataTable.subscribe("cellClickEvent",my.oDataTable.onEventEditCell);
                my.oDataTable.subscribe("cellMouseoverEvent",my.oDataTable.onEventHighlightCell);
                my.oDataTable.subscribe("cellMouseoutEvent",my.oDataTable.onEventUnhighlightCell);
                
                var onCellEdit = function(oArgs) {
                    YAHOO.log("Cell \"" + oArgs.target.id +
                            "\" was updated from \"" + oArgs.oldData + "\" to \"" +
                            oArgs.newData + "\"", "info", this.toString());
                }
                my.oDataTable.subscribe("cellEditEvent",onCellEdit);
                
			</script>
		</div>
	</body>
</html>
